<template>
	<m-layout :className="item.state == 1?'dengdaizhong':'order-detail'" title="订单详情" barBg="unset" gap="24"
		color="#fff">
		<view class="top-head">
			<view class="h1 flex">
				<m-icon type="icon-dengdaizhong" wh="39" color="#fff" spa="0 30 0 0"></m-icon>
				<text :class="{'waiting':item.state == 1}">{{orderState[item.state]}}</text>
			</view>
			<!-- <view class="h2 flex-center" v-if="item.state == 1">
				<text>需付款：</text>
				<text v-if="item.totalamount > 0">￥{{plus(item.totalamount,item.yf)}}</text>
				<text v-if="item.totalamount > 0  && item.feejf> 0">+</text>
				<template v-if="item.feejf> 0">
					<text> {{item.feejf}}{{Coin[item.feecoinid]}}</text>
				</template>
			</view> -->
			<view class="h2-2 flex" v-if="item.state == 1">
				<text>倒计时：</text>
				<uni-countdown :timestamp="timeOut" :show-colon="false" @timeup="timeOunt" />
			</view>
			<view class="h2-2 flex" v-if="item.state == 3">
				<text>自动签收倒计时：</text>
				<uni-countdown isDay :timestamp="timeOut2" :show-colon="false" @timeup="timeOunt" />
			</view>
		</view>
		<m-block className="address" gap="20 30 30" spa="30 0 20" v-if="item.expAddress">
			<view class="h1 flex">
				<m-icon type="icon-dingwei1" wh="35"></m-icon>
				<m-text ftsize="28" spa="0 20" :text="item.expUsername"></m-text>
				<m-text ftsize="28" :text="item.expPhone"></m-text>
			</view>
			<view class="h2">
				<text>{{item.expAddress}}</text>
			</view>
		</m-block>
		<m-block className="goods-card flex-between" spa="20 0" gap="24">
			<view class="left">
				<m-image wh="148" :src="item.picurl" radius="15"></m-image>
			</view>
			<view class="center">
				<view class="title otp2">
					<text>{{item['orderName']}}</text>
				</view>
				<view class="guige otp2">
					<text>{{item.attrname || item.sketch}}</text>
				</view>
			</view>
			<view class="right">
				<m-number :cny="item.wards != 4" unit="积分" size="28 24" color="var(--theme)"
					:value="item['goods'][0].price"></m-number>
				<text class="block">x{{item['goods'][0].buyCount}}</text>
			</view>
		</m-block>
		<m-block className="order-msg " gap="24 24 0" spa="20 0">
			<view class="li flex-between">
				<text class="l-text">订单编号</text>
				<view class="flex">
					<m-text weight="700" :text='item.orderCode'></m-text>
					<!-- <text class="r-text">{{item.ordercode}}</text> -->
					<m-copy :str="item.orderCode" />
				</view>
			</view>
			<view class="li flex-between">
				<text class="l-text">下单时间</text>
				<text class="r-text">{{item.ctime | mkfsTime}}</text>
			</view>
			<!-- <view class="li flex-between" v-if="item.state>1">
				<text class="l-text">支付方式：</text>
				<text class="r-text">{{Coin[item.paycoin]}}</text>
			</view> -->
			
			<view class="li flex-between" v-if="item.feejf>0">
				<text class="l-text">商品总额</text>
				<m-number :cny="item.feecoinid == 1" :value="item.feejf" size="28 24" weight="600"
					:unit="Coin[item.feecoinid]"></m-number>
			</view>
			<view class="li flex-between" v-if="item.yf">
				<text class="l-text">运费</text>
				<template v-if="item.wards == 4">
					<m-number leftText="￥" :value="item.yf" size="28 24" weight="700"></m-number>
				</template>
				<template v-else>
					<m-number unit="积分" :value="item.yf" size="28 24" weight="700"></m-number>
				</template>
			</view>
			<view class="li flex-between">
				<text class="l-text">抵扣</text>
				<m-number :value="item.couponAmt" size="28 24" leftText="￥" color="#333" weight="600"></m-number>
			</view>
			<view class="li flex-between">
				<text class="l-text">总需支付</text>
				<m-number :value="totalamount" size="28 24" :cny="item.totalCny> 0" unit="积分" color="#333"
					weight="600"></m-number>
			</view>
			<view class="li flex-between" v-if="item.expCode">
				<text class="l-text">快递编号：</text>
				<view class="flex">
					<template v-if="item.expLength <= 1">
						<text class="r-text">{{item.expCode}}</text>
						<m-copy :str="item.expCode" />
					</template>
					<template v-else>
						<m-button @click="expShow = true" gap="2 35" radius="10">详情</m-button>
					</template>

				</view>
			</view>
		</m-block>
		<m-block spa="20 0" gap="24" title="订单备注" v-if="item.buyerRemark">
			<m-text spa="15 0 0" block color='#b5b5b5' :text="item.buyerRemark"></m-text>
		</m-block>
		<m-block spa="20 0" gap="24" title="卖家备注" v-if="item.sellerRemark">
			<m-text spa="15 0 0" block color='#b5b5b5' :text="item.sellerRemark"></m-text>
		</m-block>

		<m-block className="align-center" gap="24 24 " spa="20 0" v-if="aftersell.length > 0" @click="openSh">
			<m-text weight="600">查看售后详情</m-text>
		</m-block>

		<m-service></m-service>

		<m-block className="footer flex flex-end" gap="30 24" radius="0">
			<view class="" v-if="item.expCode  && item.expLength <= 1">
				<m-button radius="10" class="cencal" type="hollow" @click="chakan(item.expArr)">查看物流</m-button>
			</view>
			<view class="" v-if="item.state==1 || item.state==10">
				<m-button radius="10" hollow bg="#999999" @click="cencalShow = true">取消订单</m-button>
			</view>
			<view v-if="item.state==10">
				<m-button radius="10" hollow bg="#999999" @click="changeShow  = true">修改收货地址</m-button>
			</view>
			<view v-if="item.state==1 ">
				<m-button radius="10"
					@click="Jump('/pages/shopping/surePay/surePay?isOrder=2&ordercode=' + item.id)">继续支付</m-button>
			</view>
			<view class="" v-if="item.state == 3">
				<m-button radius="10" @click="receivingShow  = true">确认收货</m-button>
			</view>
			<!-- <view class="" v-if="(item.state == 3 || item.state == 2) && item.wards == 1 && item.isafterSell !=  1">
				<m-button radius="10" @click="Toast('即将上线')">售后申请</m-button>
			</view> -->
			<view class="" v-if="(item.state == 3 || item.state == 2)  && item.isaftersell !=  1">
				<m-button radius="10"
					@click="Jump(`/pagesA/shopping/addAfterSale/addAfterSale?orderid=${item.id}&gid=${item.goods[0]['gid']}`)">售后申请</m-button>
			</view>
			<!-- <view v-if="item.isc==0 && item.state==4">
				<m-button @click="Jump('/pages/shopping/assessment/assessment?orderId='+item.id)" class="go"
					type="primary">评价
				</m-button>
			</view> -->
		</m-block>

		<!-- 物流订单详情 -->
		<m-dialog confirmText="关闭" :showCancel="false" v-model="expShow" @handleConfirm="expShow = false"
			title="物流订单详情">
			<template v-for="(item2,idx2) in item.expArr">
				<m-cell :key="idx2" gap="24 0" v-if="item2" @click="chakan(item2)">
					<view class="flex" slot="center">
						<m-text :text="item2" spa="0 10 0 0"></m-text>
						<m-copy :str="item2" slot="right" />
					</view>
					<m-text slot="right" ftsize="#333">查看</m-text>
				</m-cell>
			</template>

		</m-dialog>
		<!-- 取消订单 -->
		<m-dialog v-model="cencalShow" :showCancel="true" @handleCancel="cencalShow = false" title="确定取消订单吗？"
			@handleConfirm="ExcuteCancelOrder">
			<view class="cencal-pupop flex-between">
				<text class="error">*</text>
				<input type="text" v-model="content" placeholder="请输入取消原因" placeholder-class="placeholder-class">
			</view>
		</m-dialog>

		<!-- 确认收货 -->
		<m-dialog v-model="receivingShow" :showCancel="true" @handleCancel="receivingShow = false" title="提示"
			@handleConfirm="SignIn">
			<view class="hint-pupop">
				请确认物品已安全到达您的手中
			</view>
		</m-dialog>


		<!-- 修改收货地址 -->
		<m-dialog v-model="changeShow" :showCancel="true" title="修改收货地址" @handleConfirm="UpdateAddress"
			@handleCancel="handleCancelFn">
			<view class="set-address-pupop">
				<view class=" ">
					<view class="address-box">
						<view class="h1">{{item.are}}</view>
						<view class="h2">{{item.expAddress}}</view>
						<view class="h3">
							<text class="name">{{item.expUsername}}</text>
							<text class="phone">{{item.expPhone}}</text>
						</view>
					</view>
				</view>
				<view class="flex-center">
					<m-icon type="icon-qiehuan" wh="50" spa="20 0" rotate="90"></m-icon>
				</view>
				<view class="select-address">
					<template v-if="orderAddress">
						<view class="address-box">
							<view class="h1">{{selectAddress.are}}</view>
							<view class="h2">{{selectAddress.useraddress}}</view>
							<view class="h3">
								<text class="name">{{selectAddress.username}}</text>
								<text class="phone">{{selectAddress.userphone}}</text>
							</view>
						</view>
					</template>
					<template v-else>
						<view class="select flex" @click="Jump('/pagesA/mine/address/address?isChange=true')">
							<text>选择新地址</text>
							<m-icon wh="24" spa="5 0 0" type="icon-qianjin"></m-icon>
						</view>
					</template>
				</view>
			</view>
		</m-dialog>
		<uni-popup ref="popup" type="bottom" border-radius="10px 10px 0 0">
			<view class="aftersell-box">
				<view class="aftersell-head flex-between">
					<view class="flex">
						<m-icon type="icon-shouhou" wh="36" color="red" spa="0 15 0 0" />
						<m-text ftsize="30" weight="bold">商品售后</m-text>
					</view>
					<m-icon type="icon-guanbi" wh="36" @click="openShC" />
				</view>
				<view class="aftersell-list-box">
					<template v-for="(item2,idx) in aftersell">
						<m-block :key="idx" bgColor="#F6F6F6" gap="24" spa="20 0">
							<m-text display="block" color="#999999" ftsize="28">{{item2['ctime'] | mkfsTime}}</m-text>
							<m-text display="block" spa="15 0">
								{{item2.content}}
							</m-text>
							<view class="image-main">
								<template v-for="(item3,idx2) in item2.picurl" v-if="item2.picurl.length>0">
									<m-image :key="idx2" isPreview :src="item3" wh="88" radius="5"></m-image>
								</template>
							</view>
						</m-block>
					</template>
				</view>
			</view>
		</uni-popup>

	</m-layout>
</template>

<script>
	import { mapState } from 'vuex'
	import { gettime } from '@/api/Ctrls.js'
	import { SignIn, SetAddr, CancellOrder, First } from '@/api/Order.js'
	export default {
		data() {
			return {
				orderId: '',
				item: {},
				aftersell: [],
				changeShow: false,

				timeOut: -1,
				timeOut2: 0,
				cancelItem: {},
				content: '',
				cencalShow: false,
				receivingShow: false,
				expShow: false,
			};
		},
		computed: {
			...mapState({
				userinfo: state => state.user.userinfo,
				orderAddress: state => state.address.orderAddress,
				addressObj: state => state.address.addressObj,
				enum: state => state.general.enum,
				config: state => state.general.config,
			}),
			Coin() {
				return this.enum['Coin']
			},
			orderState() {
				return this.enum['OrderState']
			},
			payType() {
				return this.enum['PayType']
			},
			selectAddress() {
				return this.addressObj[this.orderAddress] || {}
			},
			totalamount() {
				try {
					// return this.plus(this.item.feejf, this.item.yf)
					return (this.item.totalCny || this.item.totalJf) - this.item.couponAmt
				} catch (e) {
					return 0
					//TODO handle the exception
				}
			},
		},
		onLoad({ orderId }) {
			this.orderId = orderId;
		},
		beforeDestroy() {
			this.$store.commit('address/REMOVE_OEDERADDRESS')
		},
		onShow() {
			this.First();
		},
		methods: {
			openSh() {
				this.$refs.popup.open()
			},
			openShC() {
				this.$refs.popup.close()
			},
			chakan(num) {
				wx.navigateTo({
					url: `plugin://kdPlugin/index?num=${num}&appName=同在优选`,
				})
			},
			// 修改收货地址
			async UpdateAddress() {
				const { success, deta, msg } = await SetAddr({
					orderid: this.orderId,
					aid: this.orderAddress,
				})

				if (!success) return this.Toast(msg)
				this.Toast('操作成功')
				this.changeShow = false;
				this.$store.commit('address/REMOVE_OEDERADDRESS')
				this.First();
			},
			// 取消修改地址
			async handleCancelFn() {
				this.changeShow = false;
				await this.sleep(200);
				this.$store.commit('address/REMOVE_OEDERADDRESS')
			},
			// 倒计时
			timeOunt() {
				setTimeout(async () => {
					this.First();
				}, 500)
			},
			async First() {
				const { data, msg, success } = await First({
					id: this.orderId
				})
				uni.stopPullDownRefresh();
				this.item = data;
				try {
					const arr = data['aftersell'];
					arr.forEach(item => {
						if (item.picurl) {
							item.picurl = item.picurl.split(',')
						}
					})
					this.aftersell = arr || []
				} catch (e) {
					console.log(e)
					//TODO handle the exception
				}

				if (data.state == 1) {
					let startTime = new Date(data.ctime);
					//设置结束时间
					let newTime = await this.gettime()
					let start = startTime.getTime() / 1000 + (30 * 60); // 结束秒数
					let a = start - newTime;
					this.timeOut = a <= 0 ? 0 : a;
				}
				if (data.state == 3) {
					let startTime = new Date(data.sendtime);
					//设置结束时间
					let newTime = await this.gettime()
					let start = startTime.getTime() / 1000 + (7 * 24 * 60 * 60); // 结束秒数  7天
					let a = start - newTime;
					this.timeOut2 = a <= 0 ? 0 : a;
				}
			},
			async gettime() {
				const { data } = await gettime()
				return data['timespan']
			},


			async SignIn() {
				const { success, msg } = await SignIn({
					id: this.orderId
				})
				this.Toast(msg);
				this.receivingShow = false;
				this.First();

			},
			async ExcuteCancelOrder() {
				if (!this.content) {
					return this.Toast('请输入取消理由')
				}
				try {
					const { success, msg } = await CancellOrder({
						orderid: this.item.id,
						// content: this.content,
					})
					this.Toast(msg)
					if (success) {
						this.cancelItem = {};
						this.content = '';
						this.cencalShow = false;
						this.First();
					}
				} catch (e) {
					//TODO handle the exception
				}

			},
		},
		onPullDownRefresh() {
			this.First();
		},

	}
</script>

<style lang="scss">
	.dengdaizhong {
		background: url('http://117.24.6.18:5003/static/tzimg/orderbg1.png') no-repeat #f6f6f6 !important;
		background-size: 750rpx 400rpx !important;
	}

	.order-detail {
		background: url('http://117.24.6.18:5003/static/tzimg/orderbg2.png') no-repeat #f6f6f6 !important;
		background-size: 750rpx 400rpx !important;
	}

	.top-head {
		.h1 {
			font-size: 36rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #fff;
		}

		.h2 {
			padding-top: 18rpx;

			&>text {
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #333333;
			}

			text:nth-of-type(2) {
				padding-left: 10rpx;
			}
		}

		.h2-2 {
			padding-top: 28rpx;
			padding-bottom: 20rpx;

			font-family: PingFang SC;
			font-weight: 500;
			font-size: 26rpx;
			color: #FFFFFF;

			/deep/ .uni-countdown {
				text {
					color: #fff !important;
				}
			}
		}

	}

	.address {
		.h1 {}

		.h2 {
			padding-top: 24rpx;
			font-size: 26rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #999999;
		}
	}

	.goods-card {
		width: 100%;
		align-items: flex-start;

		.left {}

		.center {
			flex: 1;
			overflow: hidden;
			padding: 0 30rpx;

			.title {
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #333333;
			}

			.guige {
				padding-top: 16rpx;

				text {
					font-size: 22rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #999999;
				}
			}
		}

		.right {
			text-align: right;

			.block {
				padding-top: 10rpx;
				font-size: 22rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #999999;
			}
		}
	}

	.order-msg {
		.li {
			padding-bottom: 24rpx;

			.l-text {
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #999999;
			}

			.mCopy {
				margin-left: 15rpx;
			}

			.r-text {
				margin-top: 6rpx;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #333333;
			}
		}
	}

	.service {
		text {
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #333333;
		}
	}

	.footer {
		position: fixed !important;
		bottom: 0;
		left: 0;
		width: 100%;
		box-sizing: border-box;

		.m-button {
			margin-left: 24rpx;
		}

		.cencal {
			border-color: #999999;
			color: #333;
		}
	}

	.set-address-pupop {
		padding: 30rpx 10rpx;

		.address-box {
			text-align: left;

			.h1 {
				font-size: 26rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #999999;
			}

			.h2 {
				padding: 10rpx 0;
				font-size: 30rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: bold;
				color: #333333;
			}

			.h3 {
				.name {
					padding-right: 20rpx;
					font-size: 26rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #333333;
				}

				.phone {
					font-size: 26rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #999999;
				}
			}
		}

		.select-address {
			.select {
				font-size: 28rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #333333;
			}
		}
	}

	.hint-pupop {
		text-align: center;
		padding: 24rpx;
	}

	.cencal-pupop {
		padding: 50rpx 04rpx;

		input {
			flex: 1;
			margin-left: 10rpx;
			padding: 15rpx 35rpx;
			background: #F6F6F6;
			border-radius: 100px 100px 100px 100px;
			font-size: 32rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
		}

		.placeholder-class {
			font-size: 30rpx;
			color: #CCCCCC;
		}
	}



	.aftersell-box {
		position: relative;
		max-height: 70vh;
		min-height: 30vh;
		background: #fff;
		border-radius: 20rpx 20rpx 0 0;
		padding: 0 24rpx 24rpx;
		overflow-y: scroll;

		.aftersell-head {
			position: sticky;
			z-index: 9;
			top: 0;
			padding: 20rpx 0;
			background: #fff;
		}

		.aftersell-list-box {
			.image-main {
				padding-top: 15rpx;
				display: grid;
				grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
				grid-gap: 20rpx;
			}

			.li {
				padding: 20rpx 0;

			}

			.li+.li {
				border-top: 1rpx solid #F6F6F6;
			}
		}
	}
</style>